<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择图片</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--    设置input的type和accept，当然也可设置multiple允许多文件上传，这里不做设置-->
<div>
    <input id='input1' type="file" accept="image/*" onchange="upload(this)"  typeid='1' />
    <img src="" alt="" id="img1">
	<!-- <button type="button" typeid=1>上传</button> -->
</div>
<div>
    <input id='input2' type="file" accept="image/*" onchange="upload(this)"  typeid='2' />
    <img src="" alt="" id="img2">
	<!-- <button type="button" typeid=2 onclick="upload(this)">上传</button> -->
</div>
    <script>
		function upload(obj)
		{
			let id = $(obj).attr('typeid');
			typeid = 'input'+id;
			console.log(typeid)
			if ($('#'+typeid).val() == '') {
				return;
			}
			var formData = new FormData();
			formData.append('image', document.getElementById(typeid).files[0]);
			$.ajax({
				url:"upload.php",
				type:"post",
				 dataType: "json",
				data: formData,
				contentType: false,
				processData: false,
				success: function(data) {
					// data = eval(data)
				// console.log(data)
				// console.log(data.flag)
				// console.log(data.path)
				
					if (data.flag == 1) {
						// console.log(data)
						console.log(data.filepath)
						//记得修改项目地址，maintest。我上传到upload文件夹底下，返回的文件夹是/upload/asdf.jpg
						$("#img"+id).attr("src", '/maintest/'+data.path);
						// $("#productImg").val(data.filename);
					} else {
					//	alert(data.msg);
					}
				},
				error:function(data) {
					alert("上传失败")
				}
			});			
		}
		
   //      function showImg(obj) {
			// let typeid = $(obj).attr('typeid');
			// typeid = '#img'+typeid;
   //          var file=$(obj)[0].files[0];    //获取文件信息
   //          var imgdata='';
   //          if(file)
   //          {
   //              var reader=new FileReader();  //调用FileReader
   //              reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
   //              reader.onload=function(evt){   //读取操作完成时触发。
			// 	console.log(this)

   //                  $(typeid).attr('src',evt.target.result)  //将img标签的src绑定为DataURL
   //              };
   //          }
   //          else{
   //              alert("上传失败");
   //          }
   //      }
    </script>
    <style>
        img{
            width: 120px;
        }
    </style>
</body>
</html>